<template>
  <component is="div" style="width:100px;height:100px;border:1px solid #000;">测试{{ a + b }}</component>
  <button @click="add">添加</button>
  <img src="/1.jpg" alt="" style="width:20px;"/>
  <single-form :rules="rules">
    <template #elem="{ form }">
      <div>姓名：<input type="text" v-model="form.name"/></div>
      <div>年龄：<input type="number" v-model="form.age"/></div>
      <div>电话：<input type="text" v-model="form.phone"/></div>
    </template>
    <template #submit>
      <div>
        <button>提交</button>
      </div>
    </template>
  </single-form>
</template>
<script>
import SingleForm from './components/SingleForm.vue'
export default{
  components : {
    SingleForm
  },
  data(){
    return {
      a : 1,
      b : 2,
      rules : {
        name : [{
          required : true,
          message : '姓名必填',
        }],
        age : [{
          required : true,
          message : '年龄必填'
        },{
          type : 'number',
          min : 10,
          message : '最小10岁,最大100岁'
        }],
        phone : [{
          required : true,
          message : '手机号码必填'
        },{
          pattern : /^1\d{10}$/,
          message : '手机号格式错误'
        }]
      }
    }
  },
  methods : {
    add(){
      this.a++;
    }
  },
  mounted(){
    import('@/libs/special.js');
    console.log(`helloworld`);
  }
}
</script
